<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">人像采集</h4>
        </div>
        <div class="modal-body" align="center">
            <div id="my_camera"></div>
            <div id="message_content">
                <span stype='color="orange"; font-size:16px'><b>请点击按钮开始采集</b></span>
            </div>
            <br/>
            <input type=button value="人像采集" onClick="get_face_images()">
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
            </button>
            <button id="save_new_user" type="button" class="btn btn-primary">保存</button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal -->
<script type="text/javascript" src="./webcamjs/webcam.js"></script>
<script  type="text/javascript" src="assets/vendor/timers/jquery.timers.js"></script>
<script language="JavaScript">
    Webcam.set({
        // live preview size
        width: 320,
        height: 240,
        // device capture size
        dest_width: 320,
        dest_height: 240,
        // final cropped size
        crop_width: 240,
        crop_height: 240,
        // format and quality
        image_format: 'jpeg',
        jpeg_quality: 90
    });
    Webcam.attach( '#my_camera' );

    var i = 0;
    //参考：http://hb-keepmoving.iteye.com/blog/1005996
    function get_face_images(){
        $('body').everyTime('0.2s','Collect',function(){
            i++;
            take_snapshot(i)
        },0,true );
    }

    function collect_over(uid){
        $.ajax( {
            type : "GET",
            url : "collect_over/" + uid,
            contentType: "application/json",
            error: function( XMLResponse ) {
                alert( XMLResponse.responseText )
            },
            success : function ( data ) {
                if ("success" == data.status){
                }
            }
        } );
    }

    function take_snapshot(i) {
        Webcam.snap(function (image_base64) {
            var arr = image_base64.split(",")
            if( arr.length >1 ){
                var base64_content = arr[1]
                var data = {"image_base64" : base64_content, "file_name": i +".jpeg" }
                $.ajax( {
                    type : "POST",
                    url : "collect/" + target_uid,
                    dataType : "json",
                    contentType: "application/json",
                    data : JSON.stringify(data),
                    error: function( XMLResponse ) {
                        alert( XMLResponse.responseText )
                    },
                    success : function ( data ) {
                        if ("success" == data.status) {
                            $("#message_content").html(
                                "<span stype='color=\"orange\"; font-size:18px'><b>" + data.face_count + "/" +data.max_face_count + "</b></span>" )
                            if( data.face_count == data.max_face_count ){
                                $('body').stopTime ();
                                $("#message_content").html( "<span stype='color=\"orange\"; font-size:18px'><b>人像采集完成！</b></span>" )
                                collect_over(target_uid)
                                Webcam.reset();
                            }
                        }
                    }
                } );
            }
        });
    }
</script>